<template>
	<view class="login">
		<view class="login_box">
			<image class="login_icon" src="/static/my/kyy.png" mode="widthFix"></image>
			<view class="title">欢迎来到卡优优 </view>
			<view class="subtitle">享受更优的数字权益</view>
			<view class="input_box">
				<view class="input_box_li">
					<input type="number" value="" placeholder="请输入手机号码" maxlength="11"  v-model="phone" placeholder-class="placeholder_class"/>
				</view>
				<view class="input_box_li">
					 <input type="text" value="" placeholder="请输入短信验证码" v-model="code" placeholder-class="placeholder_class"/>
					 <verification-code :seconds="seconds" ref="verCode" @start="start" @end="end" :phone="phone"></verification-code>
				</view>
			</view>
			<view class="gou" @click="gouFunc">
				<image :src="status?'/static/my/gou.png':'/static/my/gou_no.png'" mode=""></image>
				<text>我已同意《神椰隐私保护协议》和《神椰隐私保护协议》</text>
			</view>
			<view class="button_box">
				<view class="button_name" v-if="status && phone != '' && code != '' " @click="realName">注册</view>
				<view class="button_name button_name_no" v-else>注册</view>
			</view>
			<navigator class="login_name" hover-class="none" url='/pages/login/login'>
				已有账号去登录
			</navigator>
				
			<view class="platform">
				<view class="platform_box">
					<view class="line"></view>
					 <text>第三方平台登录</text>
					<view class="line"></view>
				</view>
				<image src="/static/my/wx.png" mode="widthFix"></image>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:'获取验证码',
				code:'',
				phone:'',
				status:false,
				seconds:60,//倒计时时间
			}
		},
		methods: {
			// 倒计时
			 start(){ //获取验证码
				console.log('开始')
				let phone = this.phone
				// const res = await this.$api.sendCodeBtn(phone);
				uni.showToast({
					icon:'none',
					title:'发送成功,请注意查看短信'
				})
			},
			end(){
				console.log('结束')
			},
			gouFunc(){
				this.status = !this.status
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F8FBFF;
	}
	.login{
		padding-top: 40rpx;
	}
	.login_box{
		width: 750rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
	}
	.login_icon{
		width: 96rpx;
		height: 96rpx;
	}
	.login_box .title{
		margin-top: 16rpx;
		font-weight: 400;
		font-size: 36rpx;
		line-height:50rpx;
		color: #000000;
	}
	.login_box .subtitle{
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #333333;
	}
	.input_box{
		
	}
	.input_box .input_box_li{
		width: 100%;
		margin-top: 40rpx;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #D9D9D9;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.input_box .input_box_li input{
		width: 70%;
		
	}
	.input_box_li .placeholder_class{
		font-size: 28rpx;
		line-height: 40rpx;
		color: #999999;
	}
	.gou{
		font-size: 20rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}
	.gou image{
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}
	/* 登录按钮 */
	.button_box{
		margin-top: 120rpx;
	}
	.button_name{
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin-top: 36rpx;
	}
	.button_name_no{
		opacity: .5;
	}
	.login_name{
		width: 100%;
		font-size: 32rpx;
		color: #0B87F2;
		margin-top: 40rpx;
		text-align: center;
	 }
	 .platform{
		 margin-top: 240rpx;
		 display: flex;
		 align-items: center;
		 flex-direction: column;
	 }
	 .platform .platform_box{
		 display: flex;
		 flex-direction: row;
		 align-items: center;
	 }
	 .platform .platform_box .line{
		 width: 200rpx;
		 height: 2rpx;
		 background: #D9D9D9;
	 }
	 .platform .platform_box text{
		 color: #999999;
		 font-size: 28rpx;
		 padding: 0 26rpx;
	 }
	 .platform image{
		 width: 96rpx;
		 height: 96rpx;
		 margin-top: 20rpx;
	 }
</style>
